<template>
  <div>
    <el-button @click="$router.push(`/home/xifang/add`)"   type="primary" >新增</el-button>
            
    <div class="cent">
      
      <el-table :data="west" >
      <el-table-column label="封面" width="100px" >
        
       
          <template slot-scope="scope">
            <img width="60px" :src="scope.row.src" alt="">
          </template>
        
     
      </el-table-column>
      <el-table-column label="作者" prop="username"></el-table-column>
      <el-table-column label="名字" prop="dname"></el-table-column>
      <el-table-column label="观看" prop="look"></el-table-column>
      <el-table-column label="下载" prop="down"></el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button @click="$router.push(`xifang/upload/${scope.row.w_id}`)" size="small" type="warning" icon="el-icon-edit" circle></el-button>
            <el-button @click="del(scope.row.w_id)" size="small" type="danger" icon="el-icon-delete" circle></el-button>  
      </template>
          </el-table-column>
      </el-table>
    </div>
    <div style="margin-bottom: 20px;">

    <el-pagination
        style="margin-top: 20px;"
        background
        layout="->, total, prev, pager, next, jumper"
        :page-size="18"
        :total="18*westData.pageSize"
        :current-page="page"
        @current-change="changeCurrentPage($event)">
      </el-pagination></div>
   </div>
</template>

<script>
import httpApi from '@/http';



  export default {
  data() {
    return {
      val:0,
      page:0,
      west:[],
      westData:{
        pageSize : 3, 
          total: 0, 
      },
      // dane:'',
      //   down:'',
      //   look:'',
      //   src:'',
      //   username:''
    }
  },
    methods: {
del(w_id){
  console.log('即将删除的藏品ID:', w_id)
        this.$confirm('将永久删除该藏品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发送http请求, 执行删除业务
          httpApi.xifangApi.delete({w_id}).then(res=>{
            
           this.changeCurrentPage(this.page)
          })
        })
},
      changeCurrentPage(page) {
      this.page=page       
       console.log(httpApi.xifangApi)
        httpApi.xifangApi.queryAll({page,pageSize:3}).then(res=>{
          this.pageSize=res.data.pageSize
        this.west=res.data.data.data
console.log(res) 
        
        })
      }
    },
    mounted () {
      this.changeCurrentPage(1);
    },
  }
</script>

<style lang="scss" scoped>
.cent{
   height: 500px;
   border: 1px saddlebrown solid;
   overflow: hidden;
  overflow-y:scroll ;
}
</style>